import React from 'react';
import {observer, inject} from 'mobx-react';
import MindMapStore from '../../stores/mindMap/mindMapStore';
import {Spin} from 'antd';
import Container from './Container';
import window from '../../util';

export interface MindMapProps {
    mindMapStore: MindMapStore,
    location: string
}

@inject('mindMapStore')
@observer
export default class MindMap extends React.Component<MindMapProps, any> {

    componentWillMount(){
        const {mindMapStore} = this.props;
        window.addEventListener('hashchange', (hash) => {
            if(hash.newURL.split("id=")[1]){
                mindMapStore.clearAll();
                mindMapStore.init(hash.newURL.split("id=")[1].split("&")[0]);
            }
        })
    }
    myMouseOver = (e) => {
        e.target.style.backgroundColor = 'rgb(222, 240, 255)';
    }

    myMouseOut = (e) => {
        e.target.style.backgroundColor = '';
    }

    render() {
        const {mindMapStore, location} = this.props;
        let {query} = window.weaHistory.getCurrentLocation();
        mindMapStore.mindMapId = location['query'].id || '';
        mindMapStore.rootId = location['query'].rootId || location['query'].rootid || '';
        if (location['query'].level) mindMapStore.level = location['query'].level;
        if (location['query'].isshowroot) mindMapStore.isshowroot = location['query'].isshowroot;
        if (mindMapStore.isshowroot == '0' && !mindMapStore.level) {
            mindMapStore.level = '1';
        }
        mindMapStore.otherParam = query;
        window['cube_mindMap_titleCilck'] = mindMapStore.titleClick;
        
        if(mindMapStore.windowTitle != ''){
            document.title = mindMapStore.windowTitle;
        }
        return (
            <div onClick={()=>{mindMapStore.rightMenuVisible=false}} className="cube_mindMap" style={{ height: "100%",width:'100%',overflow:'auto',backgroundColor:'#efeff4'}}>
                <Spin spinning={mindMapStore.loading}>
                    <Container {...this.props}></Container>
                    {mindMapStore.rightMenuVisible&&<div onClick={()=>{}} onContextMenu={e=>e.preventDefault()} style={{
                        width: '100px',
                        position: 'absolute',
                        top: mindMapStore.rightMenuTop+'px',
                        left: mindMapStore.rightMenuLeft+'px'}}>
                            <ul style={{border:'1px solid #cdcdcd',backgroundColor:'#f2f5f7',padding:'5px 0px 5px 0px'}}>
                                <li onMouseOver={this.myMouseOver} onMouseOut={this.myMouseOut} style={{height:'30px',padding:'5px',cursor:'pointer'}}>
                                    <span className="">按钮 1</span>
                                </li>
                                <li onMouseOver={this.myMouseOver} onMouseOut={this.myMouseOut} style={{height:'30px',padding:'5px',cursor:'pointer'}}>
                                    按钮 1
                                </li>
                                <li onMouseOver={this.myMouseOver} onMouseOut={this.myMouseOut} style={{height:'30px',padding:'5px',cursor:'pointer'}}>
                                    按钮 1
                                </li>
                            </ul>
                        </div>}
                </Spin>
            </div>
        )
    }

}
